<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li{
            list-style: none;
            line-height: 45px;
            border: 1px dashed #333;
            margin-top: 10px;
            text-indent: 10px;
        }
        p,h2,span{
            padding: 0;margin: 0;
            font-weight: normal;
            font-size: 16px;

            display: block;
            line-height: 45px;
            border: 1px dashed #333;
            margin-top: 10px;
            text-indent: 10px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <button class="add">新增</button>
        <div class="list">
            <p>我是p标签</p>
            <li class="first">01</li>
            <li id="second">02</li>
            <li data-index="2">03</li>
            <h2>我是H2</h2>
            <li>04</li>
            <li>05</li>
            <li class="six last">06</li>
            <span>我是span</span>
        </div>
    </div>
</body>
<script>
     
    // 事件委托
    // 利用事件冒泡的原理,把子代元素的事件(同种类型)委托给父代元素,由父代元素代为执行 (被委托的父元素 必须时页面中已存在的)

    // 优点:
    // 1. 提高了代码执行效率 ,代码结构更加清晰
    // 2. 节省内存
    // 3. 可以给未来生成元素(页面加载时没有,后期通过其他手段生成)绑定事件   (无论是现有的 还有未来生成的 都会冒泡到父代元素)

    
    // 如何实现事件委托?
    // 1. 利用事件冒泡的原理,把子元素的事件(同种类型)委托给父元素(被委托的父元素 必须时页面中已存在的)
    // 2. 通过父元素 获取 触发事件元素(事件源)
    // 3. 对元素进行区分
    //    a. 如果元素类型不同 就可以通过标签名来区分
    //    b. 如果元素类型相同 就可以元素的相关属性来区分
     
    // 点击li 返回内容和下标
    var add = document.getElementsByClassName("add")[0];
    var list = document.getElementsByClassName("list")[0];
    var liList = list.getElementsByTagName("li");
    var children = list.children;

    add.onclick = function(){
        var li = document.createElement("li");
        li.innerText = "我是新增的li";
        list.appendChild(li);
    }

    list.onclick = function(e){
        // debugger;
        var e = e || window.event;
        var target = e.target || e.srcElement;
        // console.log(111111,target);

        if(target.tagName.toLowerCase() == "li"){
            var index = Array.from(liList).indexOf(target);
            console.log("你点击了li",target.textContent,index);
            
            if(target.className == "first"){
                console.log("点击了第一个li");
            }else if(target.classList.contains("last") ){
                console.log("点击了最后一个li");
            }else if(target.id == "second" ){
                console.log("点击了第二个li");
            }else if(target.getAttribute("data-index") == 2 ){
                console.log("点击了第三个li");
            }else{
                console.log("点击了其他的li");
            }

        }else if(target.tagName.toLowerCase() == "span"){
            console.log("你点击了span");
        }else if(target.tagName.toLowerCase() == "p"){
            console.log("你点击了p");
        }else if(target.tagName.toLowerCase() == "h2"){
            console.log("你点击了h2");
        }

    }

</script>
</html>